<template>
  <el-dialog v-model="dialogVisible" title="选择存货编码" width="80%">
    <el-form>

      <ContentWrap>
        <!-- 搜索工作栏 style="height:auto;align-items:stretch;" -->
        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
          <el-form-item label="存货编码" prop="inventoryCode">
            <el-input
v-model="queryParams.inventoryCode" placeholder="请输入存货编码" clearable
                      @keyup.enter="handleQuery" class="!w-240px"/>
          </el-form-item>
          <el-form-item label="存货名称" prop="inventoryName">
            <el-input
v-model="queryParams.inventoryName" placeholder="请输入存货名称" clearable
                      @keyup.enter="handleQuery" class="!w-240px"/>
          </el-form-item>
          <el-form-item label="规格型号" prop="inventorySpecModel">
            <el-input
v-model="queryParams.inventorySpecModel" placeholder="请输入规格型号" clearable
                      @keyup.enter="handleQuery" class="!w-240px"/>
          </el-form-item>

          <el-form-item label="单位" prop="inventoryUnitName">
            <el-input
v-model="queryParams.inventoryUnitName" placeholder="单位" clearable
                      @keyup.enter="handleQuery" class="!w-240px"/>
          </el-form-item>


          <el-form-item label="品牌" prop="inventoryBrand">
            <el-input
v-model="queryParams.inventoryBrand" placeholder="请输入品牌" clearable
                      @keyup.enter="handleQuery" class="!w-240px"/>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
          </el-form-item>
        </el-form>
      </ContentWrap>

       <!-- 列表 -->
       <ContentWrap>
        <el-table
v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
                  style="height: calc(70vh - 50px - 50px - 35px - 25px)"
                  @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />
          <el-table-column label="存货编码" align="center" prop="inventoryCode" />
          <el-table-column label="存货名称" align="center" prop="inventoryName" />
          <el-table-column label="规格型号" align="center" prop="inventorySpecModel" />
          <el-table-column label="计量单位" align="center" prop="inventoryUnitName" />          
          <el-table-column label="品牌" align="center" prop="inventoryBrand" />
          <el-table-column label="税率" align="center" prop="irate">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.WMS_TAX_RATE" :value="scope.row.irate" />
            </template>
          </el-table-column>

          <el-table-column label="含税单价" align="center" prop="itaxprice" />
          <el-table-column label="已使用数量" align="center" prop="useQty" />
          <el-table-column label="总数量" align="center" prop="qty" />


        </el-table>
      </ContentWrap>
      <div class="footer">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineEmits, defineProps } from 'vue';
import { PomainApi, PomainsVO } from '@/api/wms/pomain';
import { ElMessage } from 'element-plus';
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'

const props = defineProps<{
  // pid: number | 0  // 主表ID（主表的关联字段）
  // isDisabled: boolean | undefined // 是否禁用表单      
  pomainId: number | 0  // 主表ID（主表的关联字段）
  initialData?: { inventoryCode: any; };
}>()
const pomainsList = ref([] as PomainsVO[]);
const selectLoading = ref(false); // 表单的加载中
const list = ref<PomainsVO[]>([]) // 列表的数据
  const loading = ref(true) // 列表的加载中
  const total = ref(0) // 列表的总页数
  const queryFormRef = ref() // 搜索的表单

  const queryParams = reactive({

  inventoryCode: undefined,
  inventoryName: undefined,
  inventorySpecModel: undefined,
  inventoryUnitName: undefined,
  inventoryBrand: undefined,
  pid: 0
})


/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    queryParams.pid=props.pomainId
    pomainsList.value = await PomainApi.getPomainsOperateListByParams(queryParams)
    list.value = pomainsList.value

  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}



const dialogVisible = ref(false);
const formData = ref({
  inventoryCode: props.initialData?.inventoryCode ||  [],
});

const emit = defineEmits(['success']);

const open = () => {
  dialogVisible.value = true;
  getList();
};

const handleSubmit = () => {
  console.log(formData.value)
  // 表单提交逻辑
  // 假设表单验证通过
  const isFormValid = true;

  if (isFormValid) {
    // 触发 success 事件，并传递表单数据
    emit('success', formData.value);
    formData.value.inventoryCode = [];
    dialogVisible.value = false; // 关闭弹窗
    
  }
};

const handleSelectionChange = (selection: PomainsVO[]) => {
  // 获取选中的行的 ID
  const selectedIds = selection.map(row => row.id);
  console.log('Selected IDs:', selectedIds);
  // 你可以在这里处理选中的行，例如存储到 formData 中
  formData.value.inventoryCode = selectedIds;
};

// 暴露 open 方法给父组件
defineExpose({ open });
</script>

<style scoped>
.footer {
  margin-top: 20px;
  text-align: right;
}
</style>